<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>弹珠球</title>
		<meta name="description" content="" />
		<meta name="author" content="可乐加糖" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
		<style type="text/css">
		form{
			width:330px;
			margin:20px;
			background-color: #ff0000;
			padding:20px;
		}
		</style>
	</head>
	<body onload="init()">
		<canvas id="canvas" width="400" height="300">
			浏览器不支持CANVAS
		</canvas>
		<br/>
		<form name="f" id="f" onsubmit="return change()">
			Hoizontal veloctiy <input name="hv" id="hv" value="4" type="number" min="-10" max="10" />
			<br/>
			Vertical velocity <input name="vv" id="vv" value="8" type="number" min="-10" max="10" />
			<br/>
			<input type="submit" value="change" />
		</form>
		<input id="silder" type="range" value="100" min="10" max="100" step="10" onchange="javascript:changeSpeed(this.value);" />
		<script type="text/javascript">
		//动画速度
		var timeQuick = 100;
		//矩形的起点
		var boxx = 20;
		var boxy = 30;
		//矩形长宽
		var boxwidth = 350;
		var boxheight = 250;
		//圆的半径
		var ballrad = 10;
		//圆心点
		var boxboundx = boxwidth + boxx - ballrad;
		var boxboundy = boxheight + boxy - ballrad;
		var inboxboundx = boxx + ballrad;
		var inboxboundy = boxy + ballrad;
		//圆的长宽
		var ballx = 50;
		var bally = 60;
		var ctx;
		var ballvx = 4;
		var ballvy = 8;
		
		var __draw__ = null;
		
		function init(){
			ctx = document.getElementById("canvas").getContext("2d");
			ctx.linewidth = ballrad;
			ctx.fillStyle = "rgb(200,0,50)";
			moveball();
			__draw__ = setInterval(moveball,timeQuick);
		}
		function moveball(){
			ctx.clearRect(boxx,boxy,boxwidth,boxheight);
			moveandcheck();
			//边界值
			ctx.beginPath();
			//画圆
			ctx.arc(ballx,bally,ballrad,0,Math.PI*2,true);
			ctx.fill();
			ctx.strokeRect(boxx,boxy,boxwidth,boxheight);
		}
		function moveandcheck(){
			var nballx = ballx + ballvx;
			var nbally = bally + ballvy;
			if(nballx > boxboundx){
				ballvx = -ballvx;
				nballx = boxboundx;
			}
			if(nballx < inboxboundx){
				nballx = inboxboundx;
				ballvx = -ballvx;
			}
			if(nbally > boxboundy){
				nbally = boxboundy;
				ballvy = -ballvy;
			}
			if(nbally < inboxboundy){
				nbally = inboxboundy;
				ballvy = -ballvy;
			}
			ballx = nballx;
			bally = nbally;
		}
		function change(){
			ballvx = Number(f.hv.value);
			ballvy = Number(f.vv.value);
			return false;
		}
		function changeSpeed(rangeNumber){
			timeQuick = rangeNumber;
			window.clearInterval(__draw__);
			setInterval(moveball,timeQuick);
			console.log(timeQuick);
		}
		</script>
	</body>
</html>
